<!-- 创建时间: 2020年12月30日 星期三 16:38 -->
<template>
    <div class="checkStudentResult_container">
        <el-divider content-position="left"
            >{{ data.className }}【{{ data.coursesName }}】成绩</el-divider
        >
        <div class="itemAnalysis" @click="itemAnalysis">试题分析</div>
        <!-- 参考人数，平均分，各分数人数分布 -->
        <el-row style="display: flex;justify-content: space-between;">
            <el-col :md="6" class="echarts">
                <div id="referenceResources"></div>
            </el-col>
            <el-col :md="6" class="echarts">
                <div id="average"></div>
            </el-col>
            <el-col :md="6" class="echarts">
                <div id="fraction"></div>
            </el-col>
        </el-row>
        <!-- table的默认排序方式是按ID排序 顺序为递减 这里可以改成其他 比如 name age address -->
        <el-table
            ref="filterTable"
            :data="studentResult"
            :default-sort="{ prop: data.coursesName, order: 'descending' }"
            style="width: 100%"
        >
            <!-- 设置sortable属性时出现排序按钮 以数字为首 按数组大小进行排序 -->
            <el-table-column prop="studentNumber" sortable label="学号">
            </el-table-column>
            <!-- 名称按符号--英文字母--拼音首字母排序 反之换序 -->
            <el-table-column prop="studentName" sortable label="姓名">
            </el-table-column>
            <!-- 设置sortable属性时出现排序按钮 以数字为首 按数组大小进行排序 -->
            <el-table-column
                :prop="data.coursesName"
                :label="data.coursesName"
                sortable
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
var echarts = require("echarts");
import "../../js/echartsStyle";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            data: {
                className: "",
                classNumber: "",
                classPeopleNumber: "",
                coursesName: "",
                questionBank: "",
            }, // 从上个页面获取的班级信息
            studentResult: [], // 学生成绩信息
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        itemAnalysis() {
            let allStudent = JSON.parse(JSON.stringify(this.studentResult));
            for(let i = 0 ; i < allStudent.length ; i++){
                delete allStudent[i][this.data.coursesName];
            }
            this.$router.push({
                name: "itemAnalysis",
                params: {
                    backPath: this.$route.path,
                    data: this.data,
                    allStudent: allStudent,
                },
            });
        },
        autoGetClassStudentCoursesResult() {
            this.$http
                .post("autoGetClassStudentCoursesResult", {
                    classNumber: this.data.classNumber,
                    coursesName: this.data.coursesName,
                })
                .then((res) => {
                    this.studentResult = JSON.parse(res.bodyText);
                    this.drawEchartsData();
                });
        },
        drawEchartsData() {
            // 计算参考人数 和 缺考人数
            let joinNumber = 0,
                noJoinNumber = 0;
            for (let i = 0; i < this.studentResult.length; i++) {
                if (this.studentResult[i][this.data.coursesName] != null) {
                    joinNumber++;
                } else {
                    noJoinNumber++;
                }
            }
            this.$store.commit("setJoinNumber", [joinNumber, noJoinNumber]);

            // 计算班级平均分
            let classAverage = 0;
            for (let i = 0; i < this.studentResult.length; i++) {
                if (this.studentResult[i][this.data.coursesName] != null)
                    classAverage += parseFloat(
                        this.studentResult[i][this.data.coursesName]
                    );
            }
            classAverage =
                Math.round((classAverage / this.studentResult.length) * 100) /
                100;
            this.$store.commit("setClassAverage", classAverage);

            // 计算各分数的分布人数 [>=90][89-80][79-70][69-60][59-0][<0]
            let fractionArray = [0, 0, 0, 0, 0, 0];
            for (let i = 0; i < this.studentResult.length; i++) {
                let c = this.studentResult[i][this.data.coursesName];
                let fraction = c == null ? "null" : parseInt(c / 10);
                switch (fraction) {
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                    case 5:
                        fractionArray[4] = ++fractionArray[4];
                        break;
                    case 6:
                        fractionArray[3] = ++fractionArray[3];
                        break;
                    case 7:
                        fractionArray[2] = ++fractionArray[2];
                        break;
                    case 8:
                        fractionArray[1] = ++fractionArray[1];
                        break;
                    case 9:
                    case 10:
                        fractionArray[0] = ++fractionArray[0];
                        break;
                    default:
                        fractionArray[5] = ++fractionArray[5];
                        break;
                }
            }
            this.$store.commit("setFractionArray", fractionArray.reverse());
        },

        // 绘制参考人数
        referenceResources() {
            let myChart = echarts.init(
                document.getElementById("referenceResources"),
                "macarons"
            );
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: "item",
                    // position: [20, 20]
                },
                title: {
                    text: "参考比例",
                    textStyle: {
                        fontSize: 15,
                    },
                },
                series: [
                    {
                        name: "小花考试",
                        type: "pie",
                        // radius: ['50%', '70%'],//设置空心圆
                        // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                        avoidLabelOverlap: true, //是否启用防止标签重叠策略
                        hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    // position: 'center',
                                    formatter: (data) => {
                                        return (
                                            "\n" +
                                            data.name +
                                            " : " +
                                            data.value +
                                            " \n(" +
                                            data.percent.toFixed(1) +
                                            "%)"
                                        );
                                    },
                                },
                                labelLine: {
                                    show: true,
                                },
                            },
                        },

                        data: [
                            {
                                value: this.$store.getters.getJoinNumber[0],
                                name: "参考人数",
                            },
                            {
                                value: this.$store.getters.getJoinNumber[1],
                                name: "缺考人数",
                            },
                        ],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 平均分
        average() {
            let myChart = echarts.init(
                document.getElementById("average"),
                "macarons"
            );
            let option = {
                title: {
                    text: "平均分",
                    textStyle: {
                        fontSize: 15,
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        name: "小花考试",
                        type: "pie", // 设置图表类型为饼图
                        radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: "center",
                                    formatter: (data) => {
                                        return (
                                            "\n" +
                                            data.name +
                                            " : " +
                                            data.value
                                        );
                                    },
                                },
                                labelLine: {
                                    show: true,
                                },
                            },
                        },
                        data: [
                            // 数据数组，name 为数据项名称，value 为数据项值
                            {
                                value: this.$store.getters.getClassAverage,
                                name: "平均分",
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        },
        // 各分数段人数
        fraction() {
            let myChart = echarts.init(
                document.getElementById("fraction"),
                "macarons"
            );
            let option = {
                tooltip: {},
                title: {
                    text: "分段分布",
                    textStyle: {
                        fontSize: 15,
                    },
                },
                legend: {
                    data: ["分段分布"],
                },
                xAxis: {
                    // [>=90][89-80][79-70][69-60][59-0][<0] <--- 这个是数组的顺序，因逻辑判断顺序的原因
                    // 我们需要将数组顺序颠倒，这样便于观看
                    data: ["缺考", "0-59", "60-69", "70-79", "80-89", ">90"],
                },
                yAxis: {},
                series: [
                    {
                        name: "小花考试",
                        type: "bar",
                        data: this.$store.getters.getFractionArray,
                    },
                ],
            };
            myChart.setOption(option);
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        if (this.$route.params.data != undefined) {
            localStorage.setItem("stuRes", this.$route.params.data);
        }
        let data = JSON.parse(localStorage.getItem("stuRes"));
        if (data == null) {
            this.$router.push("/teacher/coursesClass");
            this.$message({
                message: "数据异常，返回首页",
                type: "error",
            });
            return;
        }
        this.data = data;
        this.autoGetClassStudentCoursesResult();
        /**
         * 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
         * this.$once("hook:beforeDestroy", () => {});
         * 这个监听器和deforeDestroy(){}是一样的，但这个监听器似乎更灵活一点吧。
         */
    },
    beforeDestroy() {
        localStorage.removeItem("stuRes");
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        setTimeout(() => {
            try {
                this.referenceResources();
                this.average();
                this.fraction();
            } catch (e) {
                throw e;
            }
        }, 200);
    },
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.checkStudentResult_container {
    .itemAnalysis {
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;
        cursor: pointer;
        color: #409eff;
    }
    .itemAnalysis:hover {
        color: red;
        text-decoration: underline;
    }
    .echarts {
        div {
            height: 250px;
            display: flex;
            justify-content: center;
        }
    }
}
</style>
